@import './../../style/default.less';

.header-wrap{
	width: 100%;
	height: 100%;
	padding: 0 40px;
	background-color: @colorM;
	box-shadow: 0 0 5px @colorJ;
	.header-left{
		float: left;
		.logo-wrap{
			display: flex;
			align-items: center;
			img{
				height: 50px;
			}
			h1{
				margin: 0 0 0 15px;
				font-size: @fontB;
				color: #189aff;
			}
		}
	}
	.header-right{
		float: right;
		.search-wrap{
			float: right;
			input{
				height: 32px;
				padding: 0 5px;
				border-width: 1px;
				border-style: solid;
				border-color: #1890ff;
				border-radius: 3px 0 0 3px;
				outline: none;
				text-overflow:ellipsis;
				white-space: nowrap;
				&::placeholder{
					color: #999;
				}
				&.focused{
					width: 240px;
				}
				&.slide-enter{
					width: 164px;
					transition: all .5s ease-out;
				}
				&.slide-enter-active{
					width: 240px;
				}
				&.slide-exit{
					width: 240px;
					transition: all .5s ease-out;
				}
				&.slide-exit-active{
					width: 164px;
				}
				&.slide-appear{
					width: 164px;
				}
			}
			.search-btn{
				height: 32px;
				border: none;
				border-radius: 0 3px 3px 0;
				color: #fff;
				&:hover{
					opacity: .8;
				}
			}
		}
		.message-wrap{
			float: right;
			position: relative;
			width: 50px;
			height: 64px;
			margin-left: 10px;
			box-sizing: border-box;
			padding-top: 8px;
			text-align: center;
			cursor: pointer;
			.message-img{
				position: absolute;
				top: 22px;
				left: 12px;
				font-size: 22px;
			}
		}
		.user-wrap{
			float: right;
			margin-left: 10px
		}
	}
}